<template>
  <div v-for="item in novelList" :key="item.id">
    <NovelDisplayComponent :novel="item"></NovelDisplayComponent>
  </div>
</template>

<script>
import NovelDisplayComponent from "@/components/NovelDisplayComponent.vue";
import { getKindDetail } from "@/api/kind";
export default {
  components: { NovelDisplayComponent },
  data() {
    return {
      novelList: [],
    };
  },
  watch: {
    $route(to, from) {
      // 这里的to和from分别是新的和旧的路由对象
      if (to.params.id !== from.params.id) {
        // 只有当id发生变化时才执行
        this.getKindDetail();
      }
    },
    // 如果需要立即执行，不需要额外设置immediate，因为watch本身就会在组件创建后执行
  },
  methods: {
    async getKindDetail() {
      const res = await getKindDetail(this.$route.params.id);
      if (res.data.success) {
        this.novelList = res.data.result;
      }
    },
  },
  created() {
    this.getKindDetail();
  },
  updated() {
    // this.getKindDetail();
  },
};
</script>

<style>
</style>